<template>
  <div class="user-posts-view">
    <NavBar />
    <div class="user-posts-layout">
      <!-- 左侧分类栏 -->
      <aside class="sidebar">
        <ul>
          <li :class="{ active: selectedTypeId === null }" @click="selectType(null)">全部分类</li>
          <li
            v-for="(name, id) in postTypeMap"
            :key="id"
            :class="{ active: selectedTypeId === +id }"
            @click="selectType(+id)"
          >
            {{ name }}
          </li>
        </ul>
      </aside>

      <!-- 中部我的帖子列表 -->
      <section class="main-content">
        <h2>我的帖子</h2>
        <div class="post-filters">
          <div class="filter-group">
            <label>状态:</label>
            <select v-model="filterStatus">
              <option value="all">全部</option>
              <option value="active">活跃</option>
              <option value="deleted">已删除</option>
            </select>
          </div>
          <div class="filter-group">
            <label>排序:</label>
            <select v-model="sortOption">
              <option value="newest">最新</option>
              <option value="oldest">最早</option>
              <option value="mostLiked">最多点赞</option>
            </select>
          </div>
          <button @click="refreshPosts">刷新</button>
        </div>

        <PostList
          :posts="userPostsOnly"
          :selectedTypeId="selectedTypeId"
        />
      </section>

      <!-- 右侧预留 -->
      <aside class="right-bar"></aside>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted,watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import NavBar from '@/components/NavBar.vue'
import PostList from '@/components/PostList.vue'
import { useUserStore } from '@/stores/user'
import { usePostStore } from '@/stores/post'
import { postTypeMap } from '@/utils/postTypes'

const router = useRouter()
const userStore = useUserStore()
const postStore = usePostStore()

const user = computed(() => userStore.user)
const filterStatus = ref('all')
const sortOption = ref('newest')
const selectedTypeId = ref(null)

const userPostsOnly = computed(() =>
  postStore.allPosts.filter(p => p.userId === user.value?.userId)
)

watchEffect(() => {
  console.log('📌 allPosts from store:', postStore.allPosts)
})

const refreshPosts = () => {
  filterStatus.value = filterStatus.value
  postStore.fetchAllPosts()
}

const selectType = (typeId) => {
  selectedTypeId.value = typeId
}

onMounted(() => {
  if (!user.value) {
    router.push('/login')
  } else {
    postStore.fetchAllPosts()
  }
})
</script>

<style scoped>
.user-posts-view {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.user-posts-layout {
  display: flex;
  margin-top: 60px;
  padding: 20px;
  gap: 20px;
}

.sidebar {
  width: 200px;
}
.sidebar ul {
  list-style: none;
  padding: 0;
}
.sidebar li {
  padding: 10px;
  cursor: pointer;
}
.sidebar li.active {
  background-color: #e0f2ff;
  font-weight: bold;
}

.main-content {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
}

.right-bar {
  width: 200px;
}

.post-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-group label {
  font-weight: 500;
}
</style>
